<template>
	<div class="columns">
		<!-- Column Left -->
		<div class="column is-three-quarters">
			<el-card class="box-card" shadow="never">
				<!-- Post Header -->
				<div class="has-text-centered" slot="header">
					<!-- 帖子标题 -->
					<p class="is-size-5 has-text-weight-bold">{{ post.title }}</p>
					<!-- 发布时间 | 发布者 | 浏览量 -->
					<div class="has-text-grey is-size-7 mt-3">
						<!-- 发布时间 -->
						<span>{{ dayjs(post.createdTime).format('YYYY/MM/DD HH:mm:ss') }}</span>
						<el-divider direction="vertical" />
						<!-- 发布者 -->
						<span>发布者: {{ postAuthor.nickname }}</span>
						<el-divider direction="vertical" />
						<!-- 浏览量 -->
						<span>浏览量: {{ post.viewNum }}</span>
					</div>
				</div>

				<!-- Post Body -->
				<!-- 发帖要用到 Vditor，回显帖子详情也要用到 Vditor -->
				<div id="preview" />

				<!-- Post Tags -->
				<nav class="level has-text-grey is-size-7 mt-6">
					<!-- Level Left -->
					<div class="level-left">
						<!-- p标签用来行布局 -->
						<p class="level-item">
							<b-taglist>
								<!-- 具体的每个标签 clickable -->
								<router-link 
									v-for="(tag, index) in tags" 
									:key="index" 
									:to="{ name: 'tag', params: { tagName: tag.tagName } }"
								>
									<b-tag type="is-info is-light mr-1">
										{{ "#" + tag.tagName }}
									</b-tag>
								</router-link>
							</b-taglist>
						</p>
					</div>
					<!-- Level Right -->
					<!-- 当前用户只有浏览自己的帖子才会显示编辑与删除 -->
					<div class="level-right" v-if="token && user.id === postAuthor.id">
						<router-link 
							class="level-item" 
							:to="{ name: 'post-edit', params: { postId: post.id }}"
						>
							<span class="tag">编辑</span>
						</router-link>
						<a class="level-item">
							<span class="tag" @click="handleDelete(post.id)">删除</span>
						</a>
					</div>
				</nav>
			</el-card>

			<!-- 帖子详情页显示对应的评论 -->
			<Comments :post-id="post.id" /> 
		</div>

		<!-- Column Right -->
		<div class="column">
			<!-- 作者 -->
			<Author v-if="flag" :author="postAuthor" />
			<!-- 推荐 -->
			<Recommend v-if="flag" :post-id="post.id" />
		</div>
	</div>
</template>

<script>
import { deletePostById, fetchPostById } from '@/api/post'
import { mapGetters } from 'vuex'
import Author from '@/views/post/Author'
import Recommend from '@/views/post/Recommend'
import Comments from '@/components/Comment/Comments'
import Vditor from 'vditor'
import 'vditor/dist/index.css'

export default {
  	name: 'PostDetail',

  	components: { 
		Author, 
		Recommend, 
		Comments
	},

	data() {
		return {
			// 是否显示帖子详情页面的 Author 和 Recommend 组件
			flag: false,

			// 帖子 id 和帖子内容
			post: {
				// 当前帖子的id: 发帖成功后跳转到某个特定的帖子详情，都会有一个帖子 id 参数，
				// 通过路由中的参数得到。后期做帖子评论，也要获取到帖子的 id，表示给哪个帖子留言
				id: this.$route.params.postId,

				// 帖子的内容
				content: ''	
			},

			tags: [],

			postAuthor: {}
		}
  	},

	computed: {
		...mapGetters([
			'token',
			'user'
		])
  	},


	// 页面加载完成后，获取一下当前帖子的信息
	mounted() {
		this.getPostById()
	},

	methods: {
		// 通过 fetchTopic 方法获取帖子相关数据后，渲染得到到对应的 markdown，转换成 html 内容
		renderMarkdown(md) {
			Vditor.preview(document.getElementById('preview'), md, {
				hljs: { style: 'github' }
			})
		},

		// 初始化
		async getPostById() {
			fetchPostById(this.$route.params.postId).then(response => {
				const { data } = response
				if (response.code != 200) return this.$message.success(response.message);
				document.title = data.post.title // 帖子中的标题
				this.post = data.post // 帖子
				this.tags = data.tags // 标题
				this.postAuthor = data.author // 帖子作者
				
				// 将 markdown 渲染成 HTML
				this.renderMarkdown(this.post.content)

				this.flag = true
			})
		},

		// 删除帖子
		handleDelete(id) {
			deletePostById(id).then(value => {
				const { code, message } = value
				alert(message)

				if (code === 200) {
					setTimeout(() => {
						this.$router.push({ path: '/' })
					}, 500)
				}
			})
		}
	}
}
</script>

<style>
#preview {
  	min-height: 300px;
}
</style>
